<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>统一认证中心</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <#import "common/common.macro.ftl" as netCommon>
    <@netCommon.commonStyle />
    <link rel="stylesheet" href="${request.contextPath}/static/adminlte/plugins/iCheck/square/blue.css">
    <script>


        var tools = {
            ajaxGet: function (url, query, succCb, failCb, isJson) {

                if (query) {
                    var parms = tools.formatParams(query);
                    url += '?' + parms;

                }
                var ajax = new XMLHttpRequest();

                var getResult = function () {
                    if (ajax.readyState === 4) {
                        if (ajax.status === 200) {

                            if (isJson === undefined) {
                                isJson = true;
                            }
                            var res = isJson ? JSON.parse(ajax.responseText == "" ? '{}' : ajax.responseText) : ajax.responseText;
                            succCb && succCb(res);
                        } else {
                            failCb && failCb();
                        }

                    }
                }
                ajax.open("GET", url, true);

                ajax.send(null);

                if (ajax.onreadystatechange == 4 || ajax.onload == 4) {
                    getResult();
                } else {
                    ajax.onreadystatechange = getResult;
                }

            },

            ajaxPost: function (url, data, succCb, failCb, isJson) {

                var formData = new FormData();
                for (var i in data) {
                    formData.append(i, data[i]);
                }

                var xhr = null;
                if (XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");

                }
                var postResult = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            isJson = isJson === undefined ? true : isJson;
                            succCb && succCb(isJson ? JSON.parse(xhr.responseText) : xhr.responseText);
                        }
                    }
                }
                xhr.open("post", url, true);
                xhr.send(formData);
                xhr.onreadystatechange = postResult;
            },

            formatParams: function (data) {
                var arr = [];
                for (var name in data) {
                    arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
                }
                arr.push(("v=" + Math.random()).replace(".", ""));
                return arr.join("&");
            }


        }

        function showMsg (msg,isOk){
            document.getElementById('showMsg2').innerText=msg;
            document.getElementById('showMsg2').style.display='block';
            if(isOk){
                document.getElementById('showMsg2').style.color='green';
            }else{
                document.getElementById('showMsg2').style.color='red';
            }
            if(document.getElementById('showMsg1')){
                document.getElementById('showMsg1').style.display='none';
            }

        }
        function changeImg(id) {
            document.getElementById(id).src = "/sso/getKaptcha?d=" + new Date().getTime();
        }

        function changeLogin(isChange) {
            let loginType= document.getElementById('loginType').value;
            if(isChange){
                if (loginType!='SMS') {
                    document.getElementById('div-account-login').style.display = "none";
                    document.getElementById('div-send-sms').style.display = "block";
                    document.getElementById('loginType').value='SMS';
                } else {
                    document.getElementById('div-account-login').style.display = "block";
                    document.getElementById('div-send-sms').style.display = "none";
                    document.getElementById('loginType').value='ACCOUNT';
                }
            }else{
                if (loginType=='SMS') {
                    document.getElementById('div-account-login').style.display = "none";
                    document.getElementById('div-send-sms').style.display = "block";
                    document.getElementById('loginType').value='SMS';
                } else {
                    document.getElementById('div-account-login').style.display = "block";
                    document.getElementById('div-send-sms').style.display = "none";
                    document.getElementById('loginType').value='ACCOUNT';
                }
            }



        }

        function isMobile(mobile) {
            return /^1\d{10}$/.test(mobile)
        }

        function sendSmsCode() {
            let m = document.getElementById('mobile').value;
            if (m === undefined | m === '' | m === null) {
                showMsg("手机号码不可以为空！");
                return
            }

            let sms_code = document.getElementById('sms_code').value;
            if (sms_code === undefined | sms_code === '' | sms_code === null) {
                showMsg("验证码不可以为空！");
                return
            }

            if (isMobile(m)) {

                let url = "/sso/sendSms";
                let param = {code: sms_code, mobile: m};
                tools.ajaxPost(url, param, function (res) {
                    console.log('----', res);
                    if (res && res.code == 200) {
                        showMsg("已发送成功.",true)
                    } else {
                        if (res.msg) {
                            showMsg("发送失败：" + res.msg);
                        } else {
                            showMsg("发送失败!");
                        }
                    }
                });

            } else {
                showMsg("手机号码格式错误！");
                return
            }
        }



        window.onload=function(){
            changeLogin(false);
        }
    </script>
</head>
<body class="hold-transition login-page">

<div class="login-box">
    <div class="login-logo">
        <a><b>sso</b>系统</a>
    </div>
    <form action="${request.contextPath}/doLogin">
        <div class="login-box-body">
            <p class="login-box-msg">统一认证中心</p>

            <div id="div-account-login">

                <div class="form-group has-feedback">
                    <input type="text" name="username" class="form-control" placeholder="请输入账号名称." value="${username!}" maxlength="30">
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" name="password" class="form-control" placeholder="请输入密码." maxlength="50">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>


                <div class="form-group has-feedback row">
                    <div class="col-xs-8">
                        <input type="text" name="code" class="form-control" autocomplete="off" placeholder="请输入验证码."
                               minlength="4" maxlength="4">
                    </div>
                    <div class="col-xs-4">
                        <img id="code" src="/sso/getKaptcha" onclick="changeImg('code')"/>
                    </div>
                </div>
            </div>

            <#if SMS_ENABLED == 'true'>

                <div id="div-send-sms" style="display: none;">

                    <div class="form-group has-feedback">
                        <input type="text" id="mobile" name="mobile" class="form-control" placeholder="请输入手机号码."
                               value="${mobile!}" maxlength="30" >
                        <span class="glyphicon glyphicon-phone form-control-feedback"></span>
                    </div>


                    <div class="form-group has-feedback row">
                        <div class="col-xs-8">
                            <img id="sms_img_code" src="/sso/getKaptcha" onclick="changeImg('sms_img_code')"/>
                        </div>
                    </div>
                    <div class="form-group has-feedback row">

                        <div class="col-xs-8">
                            <input type="text" id="sms_code"  class="form-control" autocomplete="off"
                                   placeholder="请输入验证码." minlength="4" maxlength="4">
                        </div>
                        <div class="col-xs-4">
                            <a style="size: 10px;" href="javascript:sendSmsCode()">发送验证码</a>

                        </div>

                    </div>

                    <div class="form-group has-feedback">
                        <input type="text" name="phoneCode" class="form-control" autocomplete="off" placeholder="请输入收到的短信验证码."
                             minlength="4"  maxlength="10">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    </div>

                </div>
            </#if>


            <#if errorMsg?exists>
                <p id="showMsg1" style="color: red;">${errorMsg}</p>
            </#if>
            <div id="showMsg2" style="color: red;display: none;">
            </div>

            <div class="row">
                <div class="col-xs-8">
                    <#if SMS_ENABLED == 'true'>
                        <a style="size: 10px;" href="javascript:changeLogin(true)">切换登陆</a>
                    </#if>
                </div>
                <div class="col-xs-4">
                    <input type="hidden" name="redirect_url" value="${redirect_url!''}"/>
                    <input type="hidden" name="loginType" id="loginType" value="${loginType!'ACCOUNT'}" />

                    <button type="submit" class="btn btn-primary btn-block btn-flat">登陆</button>
                </div>
            </div>
        </div>
    </form>
</div>

</body>
<@netCommon.commonScript />
<script src="${request.contextPath}/static/adminlte/plugins/iCheck/icheck.min.js"></script>
<script src="${request.contextPath}/static/js/login.1.js"></script>
</html>